<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0">
		<title>雲</title>
		<link rel="stylesheet" href="css/mui.min.css">
		<link rel="stylesheet" href="css/base.css">
		<link rel="stylesheet" href="fonts/iconfont.css">

	</head>

	<body>

		<div class="wrap p-wrap">
			<!--顶部-->
			<header class="mui-bar mui-bar-nav _color">
				<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
				<h1 class="mui-title titleCenter">同游圈</h1>
			</header>
			<div id="pullrefresh" class="mui-content mui-scroll-wrapper">
				<div class="mui-scroll" >

					<div >
						<div id="segmentedControl" class="mui-segmented-control">
							<a class="mui-control-item mui-active " href="#item1">
								旅游札记
							</a>
							<a class="mui-control-item" href="#item2">
								个人动态
							</a>
						</div>
					</div>
					<div>
						<div id="item1" class="mui-control-content mui-active">
							<div class="mui-card">
								<div class="mui-card-header mui-card-media">
									<img src="img/logo.png" />
									<div class="mui-media-body">
										小M
										<p>发表于 2016-06-30 15:30</p>
									</div>
								</div>
								<div class="mui-card-content">
									<img src="images/2.jpg"" width="100%" />
								</div>
								<div class="mui-card-footer" >
									<a class="mui-card-link">Like</a>
									<a class="mui-card-link">Comment</a>
									<a class="mui-card-link">Read more</a>
								</div>
							</div>

							<div class="mui-card">
								<div class="mui-card-header mui-card-media">
									<img src="img/logo.png" />
									<div class="mui-media-body">
										小M
										<p>发表于 2016-06-30 15:30</p>
									</div>
								</div>
								<div class="mui-card-header mui-card-media" style="height:40vw;background-image:url(images/l9.jpg)"></div>
								<div class="mui-card-content">

									<div class="mui-card-content-inner">
										<p>Posted on January 18, 2016</p>
										<p style="color: #333;">这里显示文章摘要，让读者对文章内容有个粗略的概念...</p>
									</div>
								</div>
								<div class="mui-card-footer mui-card-f">
									<p>Posted on January 18, 2016</p>
								</div>
							</div>
						</div>
						<div id="item2" class="mui-control-content">
							<div class="mui-card">
								<div class="mui-card-header mui-card-media">
									<img src="img/logo.png" />
									<div class="mui-media-body">
										小M
										<p>发表于 2016-06-30 15:30</p>
									</div>
								</div>
								<div class="mui-card-content">
									<img src="images/2.jpg"" width="100%" />
								</div>
								<div class="mui-card-footer">
									<a class="mui-card-link">Like</a>
									<a class="mui-card-link">Comment</a>
									<a class="mui-card-link">Read more</a>
								</div>
							</div><div class="mui-card">
								<div class="mui-card-header mui-card-media">
									<img src="img/logo.png" />
									<div class="mui-media-body">
										小M
										<p>发表于 2016-06-30 15:30</p>
									</div>
								</div>
								<div class="mui-card-content">
									<img src="images/2.jpg"" width="100%" />
								</div>
								<div class="mui-card-footer">
									<a class="mui-card-link">Like</a>
									<a class="mui-card-link">Comment</a>
									<a class="mui-card-link">Read more</a>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>

			<div class="footer-nav">
				<ul class='clearfix'>
                    <li class=" five ">
                        <a id='homepage'><i class='show iconfont icon-all'></i>发现美</a>
                    </li>
                    <li class="five">
                        <a id='collext'><i class='iconfont icon-bangzhu'></i>小助手</a>
                    </li>
                    <li class="show five">
                        <a id='discuss'><i class='iconfont icon-edit'></i>同游圈</a>
                    </li>
                    <li class=" five">
                        <a id='toolbar'><i class='iconfont icon-favorite'></i>收藏夹</a>
                    </li>
                </ul>
			</div>

			<script src="js/mui.js"></script>
			<script>
				mui.init({
					pullRefresh: {
						container: '#pullrefresh',
						down: {
							callback: pulldownRefresh
						},
						up: {
							contentrefresh: '加载中...',
							callback: pullupRefresh
						},
						styles:{
							top:44px;
						}
					}
				});
				/**
				 * 下拉刷新具体业务实现
				 */
				function pulldownRefresh() {
					setTimeout(function() {
						var table = document.body.querySelector('.mui-table-view');
						var cells = document.body.querySelectorAll('.mui-table-view-cell');
						for(var i = cells.length, len = i + 3; i < len; i++) {
							//							var li = document.createElement('li');
							//							li.className = 'mui-table-view-cell';
							//							li.innerHTML = '<a class="mui-navigate-right">Item ' + (i + 1) + '</a>';
							//下拉刷新，新纪录插到最前面；
							//							table.insertBefore(li, table.firstChild);
						}
						mui('#pullrefresh').pullRefresh().endPulldownToRefresh(); //refresh completed
					}, 1500);
				}
				var count = 0;
				/**
				 * 上拉加载具体业务实现
				 */
				function pullupRefresh() {
					setTimeout(function() {
						mui('#pullrefresh').pullRefresh().endPullupToRefresh((++count > 2)); //参数为true代表没有更多数据了。
						var table = document.body.querySelector('.mui-table-view');
						var cells = document.body.querySelectorAll('.mui-table-view-cell');
						for(var i = cells.length, len = i + 20; i < len; i++) {
							var li = document.createElement('li');
							li.className = 'mui-table-view-cell';
							li.innerHTML = '<a class="mui-navigate-right">Item ' + (i + 1) + '</a>';
							table.appendChild(li);
						}
					}, 1500);
				}
				if(mui.os.plus) {
					mui.plusReady(function() {
						setTimeout(function() {
							mui('#pullrefresh').pullRefresh().pullupLoading();
						}, 1000);

					});
				} else {
					mui.ready(function() {
						mui('#pullrefresh').pullRefresh().pullupLoading();
					});
				}
			</script>

	</body>

</html>